<template>
  <div class="app-container ">
    <div class="header">
      <h2>南京新闻奖评审</h2>
      <h4 v-if="!loading">请从以下作品中选择<span class="news-num">{{ max_counts }}</span>件候选南京新闻奖件作品！</h4>
    </div>

    <el-skeleton v-if="loading" :rows="4" animated />

    <el-row v-else class="result" :gutter="12" style="margin-bottom: 20px;">
      <el-col :span="8">
        <el-card shadow="always">
          <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
            <span style="font-size: 14px;">总参选数量</span>
            <span style="font-size: 24px">{{ total_counts }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
            <span style="font-size: 14px;">最多评选数量</span>
            <span style="font-size: 24px">{{ max_counts }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
            <span style="font-size: 14px;">已评选/剩余数量</span>
            <span style="font-size: 24px">{{ self_counts }} / {{ sy_num }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-form ref="queryForm" style="display: flex;justify-content:space-between;" :model="queryParams" :inline="true" label-width="68px">

      <el-button v-if="rowStatus=='未选'" :disabled="!multipleSelection.length" size="mini" type="danger" icon="el-icon-star-on" @click="batch_recommend">推荐</el-button>
      <el-button v-if="rowStatus == '已选'" :disabled="!multipleSelection.length" size="mini" type="danger" icon="el-icon-star-on" @click="batch_unrecommend">取消推荐</el-button>

      <el-radio-group v-model="rowStatus" size="mini" style="margin-right: 10px;margin-left: auto;" @input="checkBtn">
        <el-radio-button label="未选" />
        <el-radio-button label="已选" />
        <el-radio-button label="全部" />
      </el-radio-group>

      <!--      <el-form-item prop="buyerName">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.buyerName"-->
      <!--          placeholder="请输入关键词"-->
      <!--          size="small"-->
      <!--        />-->
      <!--      </el-form-item>-->

      <!--      <el-form-item>-->
      <!--        <el-button-->
      <!--          style="border-radius: 0px;"-->
      <!--          type="primary"-->
      <!--          icon="el-icon-search"-->
      <!--          size="small"-->
      <!--          @click="handleQuery"-->
      <!--        >搜索</el-button>-->
      <!--      </el-form-item>-->

    </el-form>

    <el-table
      ref="multipleTable"
      v-loading="loading"
      size="mini"
      :data="list"
      style="width: 100%;"
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" align="center" width="50" /> -->
      <el-table-column
        v-if="rowStatus != '全部'"
        type="selection"
        width="55"
      />
      <el-table-column label="ID" align="center" prop="id" width="160px" />
      <el-table-column label="推荐单位" align="center" prop="username" width="250px" />
      <el-table-column label="作品标题" align="center" prop="news_title" />
      <el-table-column label="刊指平台及版面" align="center" prop="news_title">
        <template slot-scope="scope">
          <div v-for="(item,index) in scope.row.publication_json" :key="index" style="display: flex;justify-content: space-between;">
            <span style="flex: 1;text-align: left;">平台：{{ item.publication_platform }}</span>
            <span style="flex: 1;text-align: left;">版面：{{ item.publication_layout }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="主创人员" align="center" prop="author_name" width="100px" />
      <el-table-column label="推荐数量" align="center" prop="recommend_counts" width="100px" />

      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="150px">
        <template v-slot="scope">
          <!-- :disabled="scope.row.id === 1" -->

          <el-button size="mini" type="warning" @click="detail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0 " small :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />

  </div>
</template>

<script>
import {
  delNewsDeclare,
  getReviewList,
  getReviewCounts,
  reviewBatchRecommend,
  reviewBatchUnRecommend
} from '@/api/newsDeclare'
export default {
  name: 'Index',
  components: {
  },
  data() {
    return {
      rowStatus: '未选',
      dialogOpen: false,
      printOpen: false,
      printForm: { },
      form: {},
      dialogTitle: '南京新闻奖申报',
      list: [],
      total: 0,
      btnLabel: '新增',
      queryParams: {
        page: 1,
        limit: 10,
        is_added: '未选'
      },
      self_counts: 0,
      total_counts: 0,
      max_counts: 0,
      loading: false,
      multipleSelection: []

    }
  },
  computed: {
    sy_num() {
      // return 1
      return parseInt(this.max_counts - this.self_counts)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    batch_recommend() {
      const ids = this.multipleSelection.map(obj => obj.id)
      const that = this
      reviewBatchRecommend({ ids: ids }).then(response => {
        that.loading = false
        if (response.code === 10000) {
          that.$notify.success(response.message)
          that.getList()
        } else {
          that.$notify.error(response.message)
        }
      })
    },
    batch_unrecommend() {
      const ids = this.multipleSelection.map(obj => obj.id)
      const that = this
      reviewBatchUnRecommend({ ids: ids }).then(response => {
        that.loading = false
        if (response.code === 10000) {
          that.$notify.success(response.message)
          that.getList()
        } else {
          that.$notify.error(response.message)
        }
      })
    },
    checkBtn(row) {
      this.queryParams.is_added = row
      this.getList()
    },
    detail(row) {
      console.log('iddd', row.news_title)
      this.$router.push({
        path: '/newsDeclare/review/detail',
        query: { nid: row.id }

      })
    },
    /** 选中的项 */
    handleSelectionChange(selection) {
      // 判断是推荐、还是取消
      if (this.rowStatus == '未选') { // 推荐
        if (this.sy_num <= 0) {
          this.$refs.multipleTable.clearSelection()
          return
        }

        if (selection.length > this.sy_num) {
          this.$refs.multipleTable.clearSelection()
          this.$notify({
            type: 'error',
            message: '最大仅支持选择' + this.sy_num + '篇'
          })
          this.multipleSelection = []
        } else {
          this.multipleSelection = selection
        }
      } else if (this.rowStatus == '已选') { // 取消
        this.multipleSelection = selection
      }
    },
    updateForm(form, label = '编辑') {
      this.dialogTitle = form.news_title
      this.form = form
      this.btnLabel = label
    },
    handleView(row) {
      this.printOpen = true
      this.printForm = row
    },
    handleEdit(row) {
      this.dialogTitle = row.news_title
      this.form = row
      this.dialogOpen = true
      this.btnLabel = '修改'
    },
    handleDel(id) {
      console.log('id', id)
      const that = this
      that.$confirm('是否删除该数据？？？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        that.loading = true
        delNewsDeclare(id.toString()).then(response => {
          that.loading = false
          if (response.code === 10000) {
            that.$notify.success(response.message)
            that.getList()
          } else {
            that.$notify.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    add() {
      this.dialogOpen = true
      this.btnLabel = '新增'
    },
    getList() {
      const that = this
      this.loading = true
      getReviewList(this.queryParams).then(response => {
        if (response.code === 10000) {
          that.list = response.data
          that.total = response.count
        }
        this.loading = false
      })

      getReviewCounts().then(response => {
        if (response.code === 10000) {
          this.self_counts = response.data.self_counts
          this.total_counts = response.data.totalNum
          this.max_counts = response.data.max_counts
        }
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="less">
.header{
  //padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .news-num{
    font-weight: 800;
    color: red;
  }
}
.content{
  padding: 20px 20px;
  .institution-item{
    height: 200px;
    margin-bottom: 20px;
  }
  .institution-add{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-icon-plus{
      color: #409eff;
      font-size: 35px;
    }
  }
}

</style>
